<template>
    <div class="dialogueList knowledge-container">
        <div class="container">
            <div class="header flexbetween mb20">
                <el-input placeholder="请输入关键字搜索" v-model="searchInput" size="small" style="width: 200px">
                    <span slot="suffix" class="iconfont icon-sousuo"></span>
                </el-input>
                <div class="iconBtn">
                    <el-tooltip effect="light" content="添加" placement="top" :enterable="false">
                        <span class="iconfont icon-tianjia" @click="addForm"></span>
                    </el-tooltip>
                </div>
            </div>
            <element-table :data="list" :columns="cloumns" :loading="tableLoading" :tableHeight="tableHeight" :pageNo="pageNo"
                           :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize">
            </element-table>
        </div>

        <el-dialog :title="formTitle" :visible.sync="formVisible" width="540px" @before-close="clearLabel">
            <el-form ref="form" :model="form" :rules="formRules" label-width="102px" style="width: 80%; margin-left: 50px">
                <el-form-item prop="dialogueName" label="会话名称">
                    <el-input v-model="form.dialogueName" size="small" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="formVisible = false" size="small" type="text">取 消</el-button>
                <el-button type="primary" size="small" @click="formSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import elementTable from "@/components/elementTable";
import { getDialogueList, addDialogue, editDialogue, delDialogue } from "@/api/knowledge.js";
export default {
    name: "dialogueList",
    data() {
        return {
            list: [],
            searchInput: "",
            formType: "add",
            formVisible: false,
            form: {
                dialogueName: "",
            },
            formRules: {
                dialogueName: [
                    { required: true, message: "请输入会话名称", trigger: "blur" },
                ],
            },
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [{
                config: {
                    label: "会话名称",
                    prop: "dialogueName"
                },
                render: (h, scope) => {
                    return (
                        <el-link type="primary" underline={false} onClick={() => this.showDialogueProcess(scope.dialogueId)}>{scope.dialogueName}</el-link>
                    );
                },
            }, {
                config: {
                    label: "操作",
                },
                render: (h, scope) => {
                    return (
                        <div class="operation">
                            <el-tooltip effect="light" content="编辑" placement="top" enterable={false}>
                                <span class="iconfont icon-bianjidaan" onClick={() => this.editForm(scope)}></span>
                            </el-tooltip>
                            <el-tooltip effect="light" content="删除" placement="top" enterable={false}>
                                <span class="iconfont icon-shanchu" onClick={() => this.delSubmit(scope.id)}></span>
                            </el-tooltip>
                        </div>
                    );
                },
            }],
        }
    },
    created() {
        this.getList();
        this.oriForm = JSON.parse(JSON.stringify(this.form));
    },
    methods: {
        //列表
        getList() {
            this.tableLoading = true;
            var param = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            }
            getDialogueList(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    var data = resp.data;
                    this.total = data.total;
                    this.list = data.dialogueList;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        checkForm() {
            var that = this;
            return new Promise(function (resolve, reject) {
                that.$refs["form"].validate((valid) => {
                    resolve(valid);
                });
            });
        },
        async formSubmit() {
            var isValid = await this.checkForm();
            if (!isValid) {
                return this.$antMessage.warning("请填写完整信息");
            }
            var param = JSON.parse(JSON.stringify(this.form));
            if (this.formType == "add") {
                delete param["_id"];
                delete param["id"];
                addDialogue(param).then(resp => {
                    if (resp.status == 0) {
                        this.$antMessage.success("添加成功");
                        this.pageNo = 1;
                        this.getList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            } else {
                editDialogue(param).then(resp => {
                    if (resp.status == 0) {
                        this.$antMessage.success("编辑成功");
                        this.pageNo = 1;
                        this.getList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }
            this.formVisible = false;
        },
        delSubmit(id) {
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delDialogue({ ids: id }).then((resp) => {
                    if (resp.status == 0) {
                        this.$antMessage.success("删除成功");
                        this.pageNo = 1;
                        this.getList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }).catch();
        },
        addForm() {
            this.formType = "add";
            this.form = JSON.parse(JSON.stringify(this.oriForm));
            this.formVisible = true;
        },
        editForm(data) {
            this.formType = "edit";
            this.form = Object.assign(this.oriForm, data);
            this.formVisible = true;
        },
        clearLabel() {
            this.labelName = "";
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getList();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getList();
        },
        showDialogueProcess(dialogueId) {
            this.$router.push({ path: '/knowledgeManage/dialogueProcess/' + dialogueId })
        }
    },
    computed: {
        formTitle() {
            return this.formType == "add" ? "添加会话" : "编辑会话";
        },
        tableHeight() {
            return document.body.clientHeight - 310;
        },
    },
    components: {
        elementTable,
    }
}
</script>

<style lang="scss">
</style>